<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>补充几个jQuery方法</title>
    <style>
        ul{
            border: 1px solid black;
        }
        p{
            border: 1px solid red;
        }
        div{
            margin: 20px;
            padding: 20px;
        }
        .one{
            border: 1px solid orange;
        }
        .two{
            border: 1px solid green
        }
    </style>
</head>
<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <div class="one">我是one</div>
    <div class="two">我是two</div>
    <button id="append">append</button>
    <button id="prepend">prepend</button>
    <button id="before">before</button>
    <button id="after">after</button>
    <button id="change">one和two互换</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
       $('#append').click(function(){
           let p = $('<p/>').text('你好！！！')
           //append()方法用于后置追加元素
           $('ul').append(p)
       })
       $('#prepend').click(function(){
           let p = $('<p/>').text('你好！！！')
           //prepend()方法用于前置追加元素
           $('ul').prepend(p)
       })
       $('#before').click(function(){
           let p = $('<p/>').text('你好！！！')
           //before()方法用于前置插入元素
           $('ul').before(p)
       })
       $('#after').click(function(){
           let p = $('<p/>').text('你好！！！')
           //after()方法用于后置插入元素
           $('ul').after(p)
       })
       $('#change').click(function(){
           let one = $('.one')
           let two = $('.two')
           one.before(two)
           //two.after(one)
       })
    </script>
</body>
</html>